<script setup>
import { onMounted, ref, watch } from "vue";
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio } from "element-plus";
import { AxiosError } from "axios";
import { ElMessage } from "element-plus";
import loginLogService from "@/services/login-log.service";
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        require: false,
    },
    operation: {
        type: String,
        require: false,
    },
});

const emits = defineEmits(["update:visible"]);

const entity = ref({});
const saveLoading = ref(false);

const showDialog = ref(false);

const types = [
    {
        text: "登录",
        value: 'LOGIN',
    },
    {
        text: "注销",
        value: 'LOGOUT',
    },
    {
        text: "强制注销",
        value: 'FORCE_LOGOUT',
    },
];

watch(
    () => props.visible,
    async (value) => {
        showDialog.value = value;
        if (showDialog.value == true) {
            if (props.operation == 'VIEW') {
                view();
            }
        }
    }
);

const load = async () => {
    try {
        if (props.id == null) {
            return;
        }
        const e = await loginLogService.retrieve(props.id);
        entity.value = e;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
    }
};

const view = async () => {
    await load();
}

onMounted(() => {
});

const close = () => {
    emits("update:visible", false);
}

const closeDialog = () => {
    close();
};
</script>

<template>
    <ElDialog v-model="showDialog" :width="500" @close="closeDialog()" title="登录日志详情">
        <ElForm v-model="entity" label-width="120px" class="form">
            <ElFormItem label="用户名">
                <ElInput v-model="entity.username" readonly></ElInput>
            </ElFormItem>
            <ElFormItem label="类型">
                <ElSelect class="w-full" v-model="entity.type" disabled>
                    <ElOption v-for="item in types" :key="item.value" :label="item.text" :value="item.value" />
                </ElSelect>
            </ElFormItem>
            <ElFormItem label="IP">
                <ElInput v-model="entity.ip" readonly></ElInput>
            </ElFormItem>
            <ElFormItem label="是否成功">
                <ElRadioGroup v-model:model-value="entity.success" disabled>
                    <ElRadio :label="true">是</ElRadio>
                    <ElRadio :label="false">否</ElRadio>
                </ElRadioGroup>
            </ElFormItem>
            <ElFormItem label="错误消息" v-if="!entity.success">
                <ElInput v-model="entity.message" readonly></ElInput>
            </ElFormItem>
            <ElFormItem label="操作时间">
                <ElInput v-model="entity.operationTime" readonly></ElInput>
            </ElFormItem>
        </ElForm>

        <template #footer>
            <div class="dialog-footer">
                <ElButton :loading="saveLoading" @click="close()">关闭</ElButton>
            </div>
        </template>
    </ElDialog>
</template>

<style scoped>
.form {
    max-width: 460px;
}
</style>